<template>
  <div class="zxfkgl">
    <a-search :change="paginationElement?.change" :list="list" v-model="form"></a-search>
    <a-card resize>
      <a-table :data="data" :head="head">
        <template #handle="{ row }">
          <el-link type="primary" @click="handleInfo(row)">措施</el-link>
          <el-link type="info" @click="handleInfo2(row)">反馈</el-link>
        </template>
      </a-table>
      <a-pagination ref="paginationElement" :total="total" :change="getTableData"></a-pagination>
      <a-dialog :title="title" v-model="show" :footer="false">
        <a-form ref="formElement" :list="rowList" v-model="rowForm" :inline="true" :disabled="true"></a-form>
      </a-dialog>

      <a-dialog :title="title2" v-model="show2" :confirm="handleConfirm2">
        <a-form ref="formElement2" :list="rowList2" v-model="rowForm2" :inline="true"></a-form>
      </a-dialog>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { tableData, info, save } from '../../api/zxfkgl/zxfkgl'
import { ElMessage } from 'element-plus'
import { memorandumInfoNew } from '../../api/xtzxda/xtzxda'
import user from '../../store/user'

interface ZXFKGL {
  id: string
  matterType: number
  memorandumId: string
  [key: string]: unknown
}

const paginationElement = ref<APaginationInstance | null>()
const formElement = ref<AFormInstance | null>(null)
const formElement2 = ref<AFormInstance | null>(null)

const form = ref({})
const list = ref<FormItem[]>([
  { prop: 'objectName', 'aria-label': '对象名称', type: 'input' },
  { prop: 'objectCode', 'aria-label': '对象代码', type: 'input' }
])

const data = ref<ZXFKGL[]>([])
const head = ref([
  { prop: 'objectName', label: '对象名称' },
  { prop: 'objectCodeValue', label: '对象代码' },
  { prop: 'matterTypeLabel', label: '名单类型' },
  { prop: 'memorandumName', label: '备忘录名称' },
  { prop: 'handle', label: '操作', fixed: 'right' }
])
const total = ref(0)

function getTableData(page: number, row: number) {
  tableData<ZXFKGL>({
    page,
    row,
    ...form.value
  }).then(({ data: result }) => {
    data.value = result.records.map((item) => {
      return {
        ...item,
        leadDeptLabel: user.deptName,
        matterTypeLabel: Number(item.matterType) === 0 ? '黑名单' : '红名单'
      }
    })
    total.value = result.total
  })
}

const rowForm = ref<ZXFKGL>({} as ZXFKGL)

const rowList = ref<FormItem[]>([])

const show = ref(false)
const title = ref('措施详情')

function handleInfo(row: ZXFKGL) {
  rowForm.value = { ...row }
  rowList.value = []

  info<{ id: string; measureContent: string }[]>(row!.memorandumId).then(({ data: result }) => {
    show.value = true
    result.forEach((i, index) => {
      rowList.value.push({
        prop: 'measureContent' + (index + 1),
        type: 'textarea',
        'aria-label': '措施内容' + (index + 1),
        formItemProps: {
          style: {
            width: '100%'
          }
        }
      })

      rowForm.value['measureContent' + +(index + 1)] = i.measureContent
    })
  })
}

const type = [
  { label: '红名单', value: '1' },
  { label: '黑名单', value: '0' }
]
const rowForm2 = ref<ZXFKGL>({} as ZXFKGL)

const rowList2 = ref<FormItem[]>([
  { prop: 'objectName', 'aria-label': '对象名称', type: 'input', disabled: true },
  { prop: 'leadDeptLabel', 'aria-label': '反馈部门名称', type: 'input', disabled: true },
  { prop: 'objectCodeValue', 'aria-label': '对象代码', type: 'input', disabled: true },
  { prop: 'memorandumName', 'aria-label': '备忘录名称', type: 'input', disabled: true },
  { prop: 'matterName', 'aria-label': '名单名称', type: 'input', disabled: true },
  { prop: 'matterType', 'aria-label': '名单类型', type: 'select', disabled: true, data: type },
  { prop: 'measureId', 'aria-label': '执行措施', type: 'select', data: [], rules: [{ required: true, message: '请选择执行措施', trigger: 'change' }] },
  { prop: 'feedbackContent', 'aria-label': '反馈内容', type: 'textarea', rules: [{ required: true, message: '请输入反馈内容', trigger: 'blur' }] },
  { prop: 'effect', 'aria-label': '影响', type: 'textarea' },
  { prop: 'bussinessItem', 'aria-label': '业务事项', type: 'textarea' },
  { prop: 'remark', 'aria-label': '备注', type: 'textarea' }
])

const show2 = ref(false)
const title2 = ref('反馈')

function handleInfo2(row: ZXFKGL) {
  rowForm2.value = { ...row }

  memorandumInfoNew<{ id: string; measureContent: string }[]>(row.memorandumId).then(({ data: r }) => {
    rowList2.value[6].data = r.map((i) => {
      return {
        label: i.measureContent,
        value: i.id
      }
    })

    show2.value = true
  })
}

function handleConfirm2() {
  formElement2.value?.element.validate((valid: boolean) => {
    if (valid) {
      save({
        ...rowForm2.value,
        objectId: rowForm2.value.id,
        objectType: rowForm2.value.matterType
      }).then(({ message }) => {
        show2.value = false
        paginationElement.value?.change()
        ElMessage.success(message)
      })
    }
  })
}
</script>
